/**
 * @author      OA Wu <comdan66@gmail.com>
 * @copyright   Copyright (c) 2015 OA Wu Design
 */

@mixin table-form () {
  margin: 10px 0;
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  $borderRadius: 3px;

  &, &:after, &:before, *, *:after, *:before {
    @include box-sizing(border-box);
  }
  tbody {
    tr {
      &:first-child {
        th {
          &:first-child {
            @include border-top-left-radius($borderRadius);
          }
        }
        td {
          &:last-child {
            @include border-top-right-radius($borderRadius);
          }
          &:first-child {
            @include border-top-left-radius($borderRadius);
          }
        }
      }
      &:not(:first-child) {
        th {
          border-top: 0;
        }
        td {
          border-top: 0;
        }
      }
      &:last-child {
        th {
          &:first-child {
            @include border-bottom-left-radius($borderRadius);
          }
        }
        td {
          &:last-child {
            @include border-bottom-right-radius($borderRadius);
          }
          &:first-child {
            @include border-bottom-left-radius($borderRadius);
            @include border-bottom-right-radius($borderRadius);
          }
        }
      }
      th {
        &:first-child {
          border-left: 1px solid rgba(39, 40, 34, .25);
        }
        border: 1px solid rgba(39, 40, 34, .25);
        background-color: rgba(39, 40, 34, .15);
        padding: 5px 8px;
        text-align: right;
        border-left: 0;
      }
      td {
        min-width: 200px;
        padding: 5px;
        text-align: left;
        border: 1px solid rgba(39, 40, 34, .25);
        border-left: 0;
        background-color: rgba(255, 255, 255, .5);

        &:first-child {
          border-left: 1px solid rgba(39, 40, 34, .25);
        }
        label {
          & + label {
            &:before {
              content: ", ";
            }
          }
        }

        &[colspan='2'] {
          text-align: right;
        }
        .btn {
          @include button();
        }
        input[type='text'] {
          @include input();
          width: 100%;
        }
        input[type='file'] {
          @include input();
          width: 100%;
        }
        textarea {
          @include textarea();
          width: 100%;
        }
      }
    }
  }
}

@mixin table-list () {
  margin: 10px 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  $borderRadius: 3px;

  &, &:after, &:before, *, *:after, *:before {
      @include box-sizing(border-box);
  }
  thead {
    tr {
      background-color: rgba(39, 40, 34, .15);

      &:first-child {
        th {
          &:first-child {
            @include border-top-left-radius($borderRadius);
          }
          &:last-child {
            @include border-top-right-radius($borderRadius);
          }
        }
      }
      &:not(:first-child) {
        th {
          border-top: 0;
        }
      }
      th {
        border: 1px solid rgba(39, 40, 34, .25);
        border-right: 0;

        &:last-child {
          border-right: 1px solid rgba(39, 40, 34, .25);
        }
        padding: 5px;
        text-align: center;
      }
    }
  }
  tbody {
    tr {
      &:last-child {
        td {
          &:first-child {
            @include border-bottom-left-radius($borderRadius);
          }
          &:last-child {
            @include border-bottom-right-radius($borderRadius);
          }
        }
      }
      &:hover {
        background-color: rgba(39, 40, 34, .03);
      }
      td {
        border: 1px solid rgba(39, 40, 34, .25);
        border-right: 0;
        border-top: 0;
        background-color: rgba(255, 255, 255, .5);

        &:last-child {
          border-right: 1px solid rgba(39, 40, 34, .25);
        }
        padding: 5px 8px;
        text-align: center;

        svg {
          @include transition(all .3s);
          @include svg-color(rgba(39, 40, 34, .6), rgba(39, 40, 34, 1));
        }
        input[type='text'] {
          @include input();
          width: 100%;
        }
        a {
          @include a(rgba(39, 40, 34, .6), rgba(39, 40, 34, 1), false);
        }
      }
    }
  }
}
